<template>
  <el-container class="report-list-container">
    <el-main>
      <el-card shadow="never" class="selectCard searchColumn">
        <el-form label-position="right" label-width="6rem">
          <el-row :gutter="40">
            <el-col :span="10">
              <el-form-item label="报表名称：">
                <el-input v-model="searchParams.reportName" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="报表类型：">
                <el-select v-model="searchParams.reportType">
                  <el-option label="全部" value="" />
                  <el-option label="大屏报表" value="report_screen" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <SearchButton :default-params="searchParams" @refreshParams="refreshParams" @getList="getList" />
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card shadow="never" class="report-list-container tableCard">
        <vxe-toolbar :custom="{icon: 'el-icon-s-operation'}" :refresh="{query: getList}" print>
          <template v-slot:buttons>
            <el-button type="primary" icon="el-icon-plus" size="small" @click="createDmpReport('0', 1, false)">新增</el-button>
          </template>
        </vxe-toolbar>
        <vxe-table
          ref="xTree"
          border
          stripe
          resizable
          highlight-hover-row
          show-overflow
          :tree-config="{children: 'children'}"
          :loading="loading"
          :auto-resize="true"
          :data="reportList"
          height="400"
          :print-config="{}"
        >
          <vxe-table-column field="reportCode" title="报表代码" width="150" />
          <vxe-table-column field="reportName" title="报表名称" width="210" />
          <vxe-table-column field="reportTypeDesc" width="120" title="报表类型" />
          <vxe-table-column field="reportDesc" min-width="120" title="备注" />
          <vxe-table-column field="createTime" width="150" title="创建时间" />
          <vxe-table-column field="publishStatus" width="80" align="center" title="状态">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.publishStatus" :inactive-value="0" :active-value="1" active-text inactive-text @change="changeState(scope)" />
            </template>
          </vxe-table-column>
          <vxe-table-column title="操作" fixed="right" width="200" align="center" slots="default">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="previewDmpReport(scope.row.reportCode, 2, true)">预览</el-button>
              <el-button v-if="scope.row.publishStatus != 1" type="text" size="mini" @click="editDmpReport(scope.row.reportCode, 2, false)">编辑</el-button>
              <el-button v-if="scope.row.publishStatus != 1" type="text" size="mini" @click="del(scope.row.id)">删除</el-button>
              <el-button type="text" size="mini" @click="openModal(scope.row.id, 2, true)">复制</el-button>
              <el-button type="text" size="mini" @click="openModal(scope.row.id, 2, true)">分享</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <vxe-pager
          :current-page.sync="tableCurrentPage"
          :page-size.sync="pageSize"
          :total="total"
          :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          @page-change="getList()"
        />
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import SearchButton from '@/components/SearchButton'
import '@/components/Dialog'
import DmpDesigner from './designer/index.vue'
import DmpViewer from './viewer/index.vue'
import { getDmpPageList, delDmpReport, changeDmpStatus } from '@/api/report/reportManage'
export default {
  components: {
    SearchButton
  },
  data() {
    return {
      reportList: [],
      loading: false,
      tableCurrentPage: 1,
      pageSize: 20,
      total: 0,
      refreshParams: {},
      searchParams: {
        reportName: '',
        reportType: ''
      },
      dialogVisible: false,
      diabledEdit: true,
      type: '2'
    }
  },
  created() {
    this.getList()
  },
  methods: {
    createDmpReport(code, type, bool) {
      const queryData = {
        reportCode: code
      }

      this.$dialog.show('大屏设计', DmpDesigner, {
        area: ['100%', '100%']
      }, queryData).then(res => {
      }).catch(e => {})
    },
    editDmpReport(code, type, bool) {
      const queryData = {
        reportCode: code
      }

      this.$dialog.show('大屏设计', DmpDesigner, {
        area: ['100%', '100%']
      }, queryData).then(res => {
      }).catch(e => {})
    },
    previewDmpReport(code, type, bool) {
      const queryData = {
        reportCode: code
      }

      this.$dialog.show('页面预览', DmpViewer, {
        area: ['100%', '100%']
      }, queryData).then(res => {
      }).catch(e => {})
    },
    getList() {
      getDmpPageList({
        pageNum: this.tableCurrentPage,
        pageSize: this.pageSize,
        ... this.searchParams
      }).then(response => {
        if (response) {
          this.reportList = response.records
          this.total = response.total
        }
      })
    },
    del(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delDmpReport(id).then(response => {
          this.$message.success('删除成功')
          this.getList()
        })
      })
    },
    changeState(scope) {
      this.reportList[scope.seq - 1].publishStatus = scope.row.publishStatus === 1 ? 0 : 1
      changeDmpStatus({
        id: scope.row.id,
        status: scope.row.publishStatus === 1 ? 0 : 1
      }).then(response => {
        this.reportList[scope.seq - 1].publishStatus = scope.row.publishStatus === 1 ? 0 : 1
        this.$message.success(scope.row.publishStatus === 0 ? '禁用成功' : '启用成功')
      })
    }
  }
}
</script>

<style lang="scss">
.report-list-container {

}
</style>
